<template>
  <div class="container">
    <!-- Form -->
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>nei rong</span>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 打开嵌套表单的 Dialog -->
    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 点击打开外层 Dialog -->
    <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
    <el-dialog :visible.sync="outerVisible" center fullscreen :show-close='true'>
      123
      <el-button size="small" circle class="el-icon-close" />
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button size="small" type="danger" icon="el-icon-delete" circle></el-button>
      <el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body></el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
      </div>
    </el-dialog>
    <!-- 点击打开外层 Dialog -->
    <el-button type="text" @click="isShowDialogComponent = true">isShowDialogComponent</el-button>
    <invoice-mail-dialog v-if="isShowDialogComponent" :isShowDialogComponent="isShowDialogComponent" @close=""></invoice-mail-dialog>

    <div>{{ productDetail }}</div>
    <el-button type="" @click='radioclick'>点我加参数</el-button>

    <el-input-number v-model="num1" :max=10000000 :step="500000" :min="2000000" step-strictly label="描述文字" controls-position="right">

    </el-input-number>
  </div>
</template>

<script>
import { timeout } from "q";
import invoiceMailDialog from "./components/invoice-mail-dialog.vue";
import Util from "@/ck/util/util";
function num(cb) {
  for (let i = 1; i <= 10; i++) {
    cb(i * 10);
  }
}
const laeblFormatter = (value) => {
  num((res) => {
    console.log("res", res);
    return res;
  });
};
export default {
  components: { invoiceMailDialog },
  name: "dialog1",
  data() {
    return {
      formLabelWidth: "120",
      dialogVisible: false,
      dialogFormVisible: false,
      outerVisible: false,
      innerVisible: false,
      isShowDialogComponent: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      }, 
      productDetail: {
        lastChoose: [],
        skuName: [],
      },
      num1:1
    };
  },
  created() {
    // 从接口获取到Data
    let data = {
      categoryVos: [1, 2, 3],
    };
    this.productDetail = data;

    let lastChoose = [];
    data.categoryVos.forEach((i) => {
      lastChoose.push("");
    });
    this.$set(this.productDetail, "lastChoose", lastChoose);
  },
  methods: {
    radioclick(item, index = 0) {
      let lastChoose = 
      this.productDetail.lastChoose[index] = Util.getRandomStr();
      this.$set(this.productDetail, "lastChoose", lastChoose);
    },
    test(cb) {
      for (let i = 1; i <= 10; i++) {
        cb(i * 10);
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //msg:所传入需要过滤的字符串  replacedStr:指定的替换符号  options:是否等数量替换
    filterWords(msg, replacedStr, options) {
      //定义一个对象用于存放初始的值
      var defaultOptions = {
        isEqual: false,
        keyWordList: ["CNM", "SB", "NMSL", "MB", "FUCK"], //敏感词列表
      };
      //判断options对象是否传入了参数,如果传入了就将所传入参数中的属性赋值给函数内自定义的属性(覆盖初始默认值)
      if (options) {
        for (var key in options) {
          defaultOptions[key] = options[key];
        }
      }
      //给初始值对象敏感词列表中添加符号|并用于创建新的正则
      var rules = defaultOptions.keyWordList.join("|");
      console.log(rules);
      var reg = new RegExp(rules, "ig");
      console.log(reg);
      msg = msg.replace(reg, (text) => {
        // 接收一个回调函数,根据回调函数的返回值决定替换的内容
        // text => 正则匹配匹配到的敏感词
        console.log(text); //this依次指向reg中的字符串
        return defaultOptions.isEqual
          ? replacedStr.repeat(text.length) //str.repeat(n) => 将str重复n次
          : replacedStr;
        //如果isEqual:true => 用等长度的*号依次替换this所指向的字符串,否则直接全部替换为一个字符串
      });
      return msg;
    },
  },
  // directives:{
  //   big(a,b){
  //     console.log(a,b)
  //   },
  //   thousands:{
  //   // 被绑定元素插入父节点时调用
  //   inserted: function (el) {
  //     // 获取input节点
  //     if (el.tagName.toLocaleUpperCase() !== 'INPUT') {el = el.getElementsByTagName('input')[0]}// 千分位el.value = parseFloat(el.value).toLocaleString('zh', {minimumFractionDigits: 2,maximumFractionDigits: 2})// 聚焦转化为数字格式（去除千分位）el.onfocus = e => {let a = el.value.replace(/,/g, '') //去除千分号的','el.value = parseFloat(a).toFixed(2)}el.onblur = e => {el.value = parseFloat(el.value).toLocaleString('zh', {minimumFractionDigits: 2,maximumFractionDigits: 2})}}}

  //   }
  // }
};
</script>

<style lang='scss' scoped>
.container {
  // /deep/ .el-dialog__header {
  //   background-color: red;
  //   // padding: 0px;
  // }
  // /deep/ .el-dialog__body {
  //   background-color: yellow;
  //   // margin-top: 10px;
  // }
}
</style>
